<template>
	<view class="">
		<mescroll-body @init="mescrollInit" :sticky="true" :down="down" @down="downCallback" @up="upCallback">
			<view class="sticky-tabs">
				<view class="tabbar">
					<view @click="onTab(3)" :id="tab==3?'select':''">旅游<i v-if="tab == 3"></i></view>
					<view @click="onTab(2)" :id="tab==2?'select':''">酒店<i v-if="tab == 2"></i></view>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index" @click="toChoose(item.id)">
					<uni-icons type="checkbox-filled" :size="24" color="#EF5233"
						v-if="selectArr.indexOf(item.id) > -1"></uni-icons>
					<uni-icons type="circle" :size="24" color="#EDEDED" v-else></uni-icons>
					<view class="box">
						<view class="name">
							<view class="logo" v-if="item.type == 2">
								<view class="inner-img"  style="background-color: #EDE1F7;">
									<image src="../../../static/index/jiudian-icon.png"></image>
								</view>
								<text>{{item.hotel_name}}</text>
							</view>
							<view class="logo" v-if="item.type == 3">
								<view class="inner-img" style="background-color: #CEDAF5;">
									<image src="../../../static/index/lvyou-icon.png"></image>
								</view>
								<text>{{item.scenic_name}}</text>
							</view>
							<view class="status"></view>
						</view>
						<view class="product" v-if="item.type == 2">
							<image :src="item.hotel_image" @error="imageError($event,item)"  mode="aspectFill"></image>
							<view class="detail">
								<view class="title">{{item.room_name}}</view>
								<view class="text">{{item.createtime}}</view>
								<view class="text">总价:￥{{item.price}}</view>
							</view>
						</view>
						<view class="product" v-if="item.type == 3">
							<image :src="item.images[0]" @error="imageError($event,item)"  mode="aspectFill"></image>
							<view class="detail">
								<view class="title">{{item.product_name}}</view>
								<view class="text">{{item.travelDate}}</view>
								<view class="text">总价:￥{{item.price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>

		<view class="btn flex_r_around">
			<view class="left" @click="chooseAll">
				<uni-icons type="checkbox-filled" :size="24" color="#EF5233"
					v-if="selectArr.length == list.length"></uni-icons>
				<uni-icons type="circle" :size="24" color="#EDEDED" v-else></uni-icons>
				<text>选择本页</text>
			</view>
			<view class="right" @click="toNext">下一步</view>
		</view>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins:[MescrollMixin],
		data() {
			return {
				tab: 3,
				list: [],
				selectArr: [],
				down:{
					auto:false
				},
				page: 1,
				total: 0,
			}
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			onTab(e) {
				this.select = e
			},
			imageError(e,item){
				if(item.type == 3){
					item.images[0] = 'https://qiniu-cdn.maeiyun.com/imgs/hotel/error-2.png'
				}else{
					item.hotel_image = 'https://qiniu-cdn.maeiyun.com/imgs/hotel/error-2.png'
				}
			},
			toGetInvoice() {

			},
			onTab(e) {
				this.tab = e
				this.downCallback()
			},
			downCallback(page){
				this.list = []
				this.mescroll.resetUpScroll();
			},
			upCallback(page){
				var that = this
				this.request.httpTokenRequest({
					url: "order/getOrderList",
					method: "get"
				},{
					fapiao_status: 1,//开票状态:1=未开票,2=已开票
					status: "2,3,4,5,6",
					type:this.tab,
					page:page.num
				}).then(function(res) {
					if (res.code == 0) {
						that.list = [...that.list,...res.data.data]
						that.mescroll.endSuccess(that.list.length,that.list.length == res.data.total?false:true)
					} else {
						this.mescroll.endErr()
					}
				})
			},
			toChoose(e) {
				if (this.selectArr.indexOf(e) > -1) {
					this.selectArr = this.selectArr.filter(item => item != e);
				} else {
					this.selectArr.push(e)
				}
			},
			chooseAll() {
				if (this.selectArr.length == this.list.length) {
					this.selectArr = []
				} else {
					this.selectArr = []
					this.list.forEach(item => {
						this.selectArr.push(item.id)
					})
				}
			},
			toNext() {
				this.$util.toUrl('/otherpages/order/invoice/content?ids='+this.selectArr.toString())
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sticky-tabs{
		z-index: 990;
		position: sticky;
		top: 0;
		background-color: #F5F7F8;
		padding-top: 24rpx;
	}
	.tabbar {
		padding: 0 25rpx;
		display: flex;
		align-items: center;
		background: #F5F7F8;
		view {
			height: 39rpx;
			font-size: 30rpx;
			color: #08090A;
			line-height: 39rpx;
			position: relative;
			margin: 0 60rpx;
			i {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 11rpx;
				background: #EF5233;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}
	}
	
	.list {
		margin-top: 24rpx;
		.item {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;

			.box {
				margin-left: 20rpx;
			}

			.name {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.logo {
					display: flex;
					align-items: center;
					.inner-img{
						background-color: #028777;
						border-radius: 50%;
						margin-right: 10rpx;
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						padding-top: 9rpx;
					}
					image {
						width: 26rpx;
						height: 22rpx;
					}

					text {
						font-size: 30rpx;
						color: #08090A;
						line-height: 42rpx;
					}
				}

				.status {}
			}

			.product {
				display: flex;
				margin: 30rpx 0 30rpx;

				image {
					width: 142rpx;
					height: 190rpx;
					margin-right: 23rpx;
				}

				.detail {
					flex: 1;

					.title {
						font-size: 28rpx;
						color: #656667;
						line-height: 40rpx;
					}

					.text {
						font-size: 24rpx;
						color: #656667;
						line-height: 33rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.content {
		min-height: 100vh;
		box-sizing: border-box;
		padding: 30rpx 30rpx 130rpx;
	}

	.btn {
		width: 100vw;
		position: fixed;
		bottom: 0;
		z-index: 99;
		left: 0;
		height: 120rpx;
		background: #FEFFFF;
		border-radius: 8rpx;
		padding: 0 30rpx 0 40rpx;

		.left {
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
				color: #656667;
				line-height: 40rpx;
				margin-left: 20rpx;
			}
		}

		.right {
			width: 270rpx;
			height: 88rpx;
			background: #EF5233;
			border-radius: 44rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>